<template>
  <div class="about">
    <el-container>
      <el-header>
        <dev >{{data_[index].title}}</dev>
      </el-header>

        <el-collapse v-model="activeNames" @change="handleChange"  >
          <el-collapse-item title="封面 Cover" name="1">
            <div class="demo-image__preview">
              <el-image
                      style="width: 100px; height: 100px"
                      fit="contain"
                      :src="url"
                      :preview-src-list="srcList"
                      >
              </el-image>
            </div>
          </el-collapse-item>
          <el-collapse-item title="介绍 Introduction" name="2">
            <span style="color: red">¥{{data_[index].price}}</span>
            <br>
            <span >付款人数：{{data_[index].payment}}</span>
            <br><span >商店：{{data_[index].ShopName}}</span>
          </el-collapse-item>

        </el-collapse>


      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    data() {
      return {
        activeNames: ['1','2'],
        srcList:[],
        index:this.$route.params.id,
        url:"",
        data_:''
      };
    },
    name: 'About',
    methods: {
      handleChange(val) {
        console.log(val);
      },

    },
    created(){

      if(this.$route.params.data_name == "CommodityData_") {
        this.data_ = this.CommodityData
      }else if(this.$route.params.data_name == "ShoppingCart_"){
        this.data_ = this.ShoppingCart
      }else if(this.$route.params.data_name == "SearchCommodity_"){
        this.data_ = this.SearchCommodity
      }


      this.url = "http://www.qjhyuki.top/vuehomeword/VueShop/image/"+this.data_[this.$route.params.id].photo

      this.srcList.push(this.url)


    },
    computed:{
      ...mapState(['CommodityData']),
      ...mapState(['ShoppingCart']),
      ...mapState(['SearchCommodity'])
    }
  }
</script>
